<template>
  <bd-popup
    class="custom"
    v-model:show="props.show"
    :style="{
      'background-color': 'transparent',
      padding: '0 25px 30px 25px !important',
    }"
    :overlay-style="{ background: 'rgba(0, 0, 0, 0.5)' }"
    zIndex="999999"
    teleport="body"
    :close-on-click-overlay="false"
    popupId="lotteryV3Desc"
    :weights="4"
  >
    <div class="box">
      <div class="content">
        <!-- 标题 -->
        <div class="title">
          <img
            class="title-bg"
            src="/image/lottery-v3/winningResult-title.svg"
          />
          <div class="title-text">
            {{ $t("lotteryMoney.zjsm") }}
          </div>
        </div>
      </div>
      <!-- 描述 -->
      <div class="desc">{{ $t("lotteryMoney.zjsmDesc") }}</div>
      <!-- 例如 -->
      <div class="example items-center">
        <div class="example-desc">{{ $t("lotteryMoney.zhsmlr") }}</div>
        <div class="example-nums items-center">
          <div
            class="example-nums-item"
            v-for="(num, index) in [1, 2, 3, 4, 'f']"
            :key="index"
          >
            <img
              class="example-nums-item-bg"
              src="/image/lottery-v3/num-zj-bg1.svg"
            />
            <div class="example-nums-item-text">{{ num }}</div>
          </div>
        </div>
      </div>
      <!-- 一等奖 -->
      <div class="award">
        <div class="award-top items-center">
          <img class="award-top-icon" src="/image/title-blue-icon.svg" />
          <div class="award-top-text">{{ $t("lotteryMoney.ydjDesc") }}</div>
        </div>
        <div class="award-bottom items-center">
          <div
            class="award-bottom-item"
            v-for="(num, index) in [1, 3, 2, 'f', 4]"
            :key="index"
          >
            <img
              v-if="[1, 2, 3, 4, 'f'].includes(num)"
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-zj-bg1.svg"
            />
            <img
              v-else
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-xz-bg1.svg"
            />
            <div class="award-bottom-item-text">{{ num }}</div>
          </div>
        </div>
      </div>
      <!-- 二等奖 -->
      <div class="award">
        <div class="award-top items-center">
          <img class="award-top-icon" src="/image/title-blue-icon.svg" />
          <div class="award-top-text">{{ $t("lotteryMoney.edjDesc") }}</div>
        </div>
        <div class="award-bottom items-center">
          <div
            class="award-bottom-item"
            v-for="(num, index) in [1, 9, 2, 'f', 4]"
            :key="index"
          >
            <img
              v-if="[1, 2, 3, 4, 'f'].includes(num)"
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-zj-bg1.svg"
            />
            <img
              v-else
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-xz-bg1.svg"
            />
            <div
              class="award-bottom-item-text"
              :class="{
                'award-bottom-item-text-xz': ![1, 2, 3, 4, 'f'].includes(num),
              }"
            >
              {{ num }}
            </div>
          </div>
        </div>
      </div>
      <!-- 三等奖 -->
      <div class="award">
        <div class="award-top items-center">
          <img class="award-top-icon" src="/image/title-blue-icon.svg" />
          <div class="award-top-text">{{ $t("lotteryMoney.sdjDesc") }}</div>
        </div>
        <div class="award-bottom items-center">
          <div
            class="award-bottom-item"
            v-for="item in includesNumToArr('132f4', 'ffc32')"
            :key="item.str"
          >
            <img
              v-if="item.include"
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-zj-bg1.svg"
            />
            <img
              v-else
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-xz-bg1.svg"
            />
            <div
              class="award-bottom-item-text"
              :class="{
                'award-bottom-item-text-xz': !item.include,
              }"
            >
              {{ item.str }}
            </div>
          </div>
        </div>
      </div>
      <!-- 参与奖 -->
      <div class="award">
        <div class="award-top items-center">
          <img class="award-top-icon" src="/image/title-blue-icon.svg" />
          <div class="award-top-text">{{ $t("lotteryMoney.cyjDesc") }}</div>
        </div>
        <div class="award-bottom items-center">
          <div
            class="award-bottom-item"
            v-for="(num, index) in [7, 1, 'd', 'f', 6]"
            :key="index"
          >
            <img
              v-if="[1, 2, 3, 4, 'f'].includes(num)"
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-zj-bg1.svg"
            />
            <img
              v-else
              class="award-bottom-item-bg"
              src="/image/lottery-v3/num-xz-bg1.svg"
            />
            <div
              class="award-bottom-item-text"
              :class="{
                'award-bottom-item-text-xz': ![1, 2, 3, 4, 'f'].includes(num),
              }"
            >
              {{ num }}
            </div>
          </div>
        </div>
      </div>
      <!-- footer 按钮 -->
      <div class="footer items-center">
        <!-- 分享 -->
        <div class="footer-item" @click.stop="closePopup">
          {{ $t("lotteryMoney.ljxz") }}
        </div>
      </div>
    </div>
    <!-- 关闭 -->
    <img
      class="close"
      src="/image/close-fff-icon.svg"
      @click.stop="closePopup"
    />
  </bd-popup>
</template>
<script setup lang="ts" name="winDescPopup">
import { ref, reactive, onMounted, computed, nextTick } from "vue";

const props = withDefaults(
  defineProps<{
    show: boolean;
  }>(),
  {
    show: false,
  }
);

const emit = defineEmits(["update:show"]);

onMounted(() => {});
onBeforeUnmount(() => {});

// 关闭弹窗
const closePopup = () => {
  // https://etherscan.io/tx/0xfcde0e9d888949df20e6c86b8cc4dd0456a3b30fd6f6a44d540d285375d54f00
  emit("update:show", false);
};

/**
 * @description: 匹配中奖号码
 * 1. 重复出现的数字,要根据数量显示
 * @param {*} a 中奖号码
 * @param {*} b 下注号码
 * @return {*} c 下注号码,与中奖号码匹配的结果
 * @author: zhj1214
 */
const includesNumToArr = (a: string, b: string) => {
  const charMapA = new Map();

  // 构建字符映射表，记录字符在 a 中的数量
  for (let char of a) {
    charMapA.set(char, (charMapA.get(char) || 0) + 1);
  }

  let c = [];
  for (let char of b) {
    const countInA = charMapA.get(char);
    if (countInA && countInA > 0) {
      c.push({ str: char, include: true });
      charMapA.set(char, countInA - 1);
    } else {
      c.push({ str: char, include: false });
    }
  }
  return c;
};
</script>
<style lang="scss" scoped>
.box {
  position: relative;
  border-radius: 12 * 2px;
  background: #fff;
}
.content {
  padding: 15 * 2px;
}

.title {
  position: relative;
  width: 100%;
  justify-content: center;
  margin-bottom: 10 * 2px;
  &-bg {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 0;
    width: 303 * 2px;
    height: 30 * 2px;
  }
  &-text {
    position: relative;
    z-index: 9;
    height: 30 * 2px;
    line-height: 30 * 2px;
    text-align: center;

    color: #fff;
    font-size: 15 * 2px;
    font-weight: 590;
  }
}

.desc {
  color: #999da7;
  font-size: 13 * 2px;
  font-weight: 400;
  margin: 0 15 * 2px 10 * 2px 15 * 2px;
}

.example {
  color: #999da7;
  font-size: 13 * 2px;
  font-weight: 400;
  margin-bottom: 10 * 2px;
  flex-direction: column;
  justify-content: center;
  margin: 0 15 * 2px 10 * 2px 15 * 2px;
  padding: 8 * 2px 10 * 2px;
  border-radius: 6 * 2px;
  background: linear-gradient(90deg, #ccf0ff 0%, #cce5ff 100%);

  &-desc {
    color: #002853;
    font-size: 12 * 2px;
    font-weight: 400;
    margin-bottom: 4 * 2px;
  }
  &-nums {
    &-item {
      position: relative;
      width: 24 * 2px;
      height: 24 * 2px;
      line-height: 24 * 2px;
      margin-right: 10 * 2px;

      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &-text {
        position: relative;
        z-index: 9;
        text-align: center;
        color: #fff;
        font-size: 13 * 2px;
        font-weight: 590;
      }
    }
  }
}

.award {
  border-radius: 8 * 2px;
  border: 0.6px solid rgba(115, 119, 128, 0.15);
  padding: 8 * 2px 10 * 2px;
  margin: 0 15 * 2px 10 * 2px 15 * 2px;

  &-top {
    margin-bottom: 4 * 2px;
    &-icon {
      width: 9 * 2px;
      height: 9 * 2px;
      margin-right: 4 * 2px;
    }
    &-text {
      color: #141924;
      font-size: 13 * 2px;
      font-weight: 400;
    }
  }
  &-bottom {
    justify-content: center;
    &-item {
      position: relative;
      width: 16 * 2px;
      height: 16 * 2px;
      line-height: 16 * 2px;
      margin-right: 10 * 2px;

      &-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      &-text {
        position: relative;
        z-index: 9;
        text-align: center;
        color: #fff;
        font-size: 12 * 2px;
        font-weight: 590;
        &-xz {
          color: #8e96a4;
        }
      }
    }
  }
}

.footer {
  position: relative;
  width: 100%;
  height: 56 * 2px;
  padding: 10 * 2px 15 * 2px;
  border-top: 0.7px solid rgba(115, 119, 128, 0.15);

  &-item {
    position: relative;
    width: 100%;
    height: 36 * 2px;
    line-height: 36 * 2px;
    text-align: center;

    color: #fff;
    font-size: 15 * 2px;
    font-weight: 590;
    border-radius: 6 * 2px;
    background: #007bff;
  }
}

.close {
  position: relative;
  z-index: 9;
  bottom: -30 * 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 30 * 2px;
  height: 30 * 2px;
}
</style>
